<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>#(resource.id != null ? '编辑资源' : '新建资源') - 资源管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* 全局样式 */
        body {
            background-color: #f8f9fa;
            padding-top: 20px;
            padding-bottom: 40px;
        }
        .container-main {
            max-width: 800px;
            margin: 0 auto;
        }
        .card-shadow {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            border: none;
            margin-top: 20px;
        }
        .section-header {
            border-bottom: 2px solid #0d6efd;
            padding-bottom: 12px;
            margin-bottom: 20px;
            position: relative;
        }
        .section-header:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100px;
            height: 2px;
            background: #0dcaf0;
        }

        /* 操作按钮样式 */
        .btn-action {
            padding: 10px 25px;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .btn-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 表单元素样式 */
        .form-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 8px;
        }
        .form-control, .form-select {
            border-radius: 8px;
            padding: 12px 15px;
            border: 1px solid #ced4da;
            transition: all 0.3s;
        }
        .form-control:focus, .form-select:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
        }
        .required-star {
            color: #dc3545;
            margin-left: 3px;
        }

        /* 状态徽章 */
        .status-badge {
            padding: 0.25rem 0.6rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.85rem;
            display: inline-block;
            min-width: 60px;
            text-align: center;
        }

        /* 操作按钮组 */
        .form-footer {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 0 0 10px 10px;
            margin-top: 25px;
            display: flex;
            gap: 15px;
            border-top: 1px solid #e9ecef;
        }

        /* 图标装饰 */
        .form-icon {
            width: 40px;
            height: 40px;
            background: #e6f0ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        .form-icon i {
            color: #0d6efd;
            font-size: 1.2rem;
        }

        /* 卡片标题 */
        .card-title {
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }

        /* 文件上传区域样式 */
        .file-upload-area {
            border: 2px dashed #ced4da;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            background-color: #f8f9fa;
            cursor: pointer;
            transition: all 0.3s;
        }
        .file-upload-area:hover {
            border-color: #86b7fe;
            background-color: #e9f0ff;
        }
        .file-upload-icon {
            font-size: 2.5rem;
            color: #6c757d;
            margin-bottom: 10px;
        }
        .file-preview {
            max-width: 100%;
            max-height: 200px;
            margin-top: 15px;
            border-radius: 6px;
            display: none;
        }
        .progress {
            height: 10px;
            border-radius: 5px;
            margin-top: 15px;
        }

        /* 资源类型标签 */
        .resource-type-badge {
            font-size: 0.9rem;
            padding: 0.35rem 0.8rem;
            border-radius: 20px;
        }
    </style>
</head>
<body>
<div class="container container-main">
    <!-- 顶部标题 -->
    <div class="text-center mb-4">
        <h1 class="display-5 fw-bold text-primary">
            <i class="fas fa-file-import me-2"></i>资源管理系统
        </h1>
        <p class="lead text-muted">高效管理您的多媒体资源文件</p>
    </div>

    <!-- 表单卡片 -->
    <div class="card card-shadow">
        <div class="card-header bg-white">
            <h3 class="section-header mb-0">
                <div class="d-flex align-items-center">
                    <div class="form-icon">
                        <i class="fas fa-cloud-upload-alt"></i>
                    </div>
                    <div>
                        <i class="fas fa-file text-primary me-2"></i>#(resource.id != null ? '编辑资源' : '添加资源')
                        <div class="text-muted mt-1" style="font-size: 0.95rem; font-weight: normal;">
                            #(resource.id != null ? '编辑' : '添加')您的多媒体资源文件
                        </div>
                    </div>
                </div>
            </h3>
        </div>

        <div class="card-body">
            <form action="/plResource/#(resource.id != null ? 'update' : 'save')" method="post" enctype="multipart/form-data">
                #if(resource.id != null)
                <input type="hidden" name="resource.id" value="#(resource.id)">
                #end

                <div class="row g-3">
                    <!-- 基础信息 -->
                    <div class="col-md-6">
                        <label class="form-label">资源名称 <span class="required-star">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-tag"></i>
                            </span>
                            <input type="text" class="form-control"
                                   name="resource.name"
                                   value="#(resource.name ??)"
                                   required
                                   placeholder="请输入资源名称">
                        </div>
                    </div>

                    <!-- 资源类型选择 -->
                    <div class="col-md-6">
                        <label class="form-label">资源类型 <span class="required-star">*</span></label>
                        <select class="form-select" name="resource.type" required>
                            <option value="2" #(resource.type == '2' ? 'selected' : '')>视频</option>
                        </select>
                    </div>
                </div>

                <!-- 文件上传区域 -->
                <div class="mb-4 mt-4">
                    <label class="form-label">资源文件 <span class="required-star">*</span></label>

                    <div class="file-upload-area" id="fileUploadArea">
                        <div class="file-upload-icon">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </div>
                        <h5>拖放文件到此处或点击上传</h5>
                        <p class="text-muted small">支持格式：JPG, PNG, MP4, MP3<br>最大文件大小：100MB</p>
                        <input type="file" class="form-control d-none"
                               name="file"
                               id="fileInput"
                               accept=".jpg,.png,.mp4,.mp3"
                               #(resource.id != null ? '' : 'required')>

                        <img id="filePreview" class="file-preview" src="" alt="文件预览">

                        <!-- 显示已上传文件 -->
                        #if(resource.id ?? && resource.path ??)
                        <div class="mt-2">
                            <span class="text-muted">当前文件：</span>
                            <a href="#(resource.path)" target="_blank" class="text-primary">
                                #(resource.path.substring(resource.path.lastIndexOf("/")+1))
                            </a>
                        </div>
                        #end
                    </div>

                    <div class="progress mt-3" id="progressBar" style="display: none;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar" style="width: 0%"></div>
                    </div>
                </div>

                <div class="row g-3 mt-3">
                    <!-- 状态选择 -->
                    <div class="col-md-6">
                        <label class="form-label">状态 <span class="required-star">*</span></label>
                        <select class="form-select" name="resource.state" required>
                            <option value="Y" #(resource.state == 'Y' ? 'selected' : '')>启用</option>
                            <option value="N" #(resource.state == 'N' ? 'selected' : '')>停用</option>
                        </select>
                    </div>

                    <!-- 上传时间显示 -->
                    <div class="col-md-6">
                        <label class="form-label">上传时间</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-calendar-alt"></i>
                            </span>
                            <input type="text" class="form-control"
                                   value="#if(resource.id ?? && resource.create_time ??) #(resource.create_time) #else 新上传 #end"
                                   readonly>
                        </div>
                    </div>
                </div>

                <!-- 描述说明 -->
                <div class="mb-3 mt-4">
                    <label class="form-label">描述说明</label>
                    <textarea class="form-control" name="resource.description" rows="3"
                              placeholder="请输入资源描述信息">#(resource.description ??)</textarea>
                </div>

                <!-- 预览状态 -->
                <div class="alert alert-light border mt-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-primary me-2"></i>
                        </div>
                        <div class="flex-grow-1 ms-2">
                            <h6 class="mb-1">当前资源预览</h6>
                            <div class="d-flex flex-wrap gap-2 mt-2">
                                <span class="resource-type-badge
                                    #if(resource.type == '1') bg-info
                                    #else if(resource.type == '2') bg-danger
                                    #else bg-warning text-dark
                                    #end">
                                    #if(resource.type == '1')
                                        <i class="fas fa-image me-1"></i>图片
                                    #else if(resource.type == '2')
                                        <i class="fas fa-video me-1"></i>视频
                                    #else
                                        <i class="fas fa-music me-1"></i>音频
                                    #end
                                </span>
                                <span class="status-badge text-white #(resource.state == 'Y' ? 'bg-success' : 'bg-secondary') ">
                                    #(resource.state == 'Y' ? '启用' : '停用')
                                </span>
                                <span class="badge bg-light text-dark border">
                                    <i class="fas fa-hdd me-1"></i>文件大小: #if(resource.id ?? && resource.size ??) #(resource.size)MB #else 待上传 #end
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 表单操作按钮 -->
                <div class="form-footer">
                    <button type="submit" class="btn btn-primary btn-action">
                        <i class="fas fa-save me-2"></i>#(resource.id != null ? '保存修改' : '添加资源')
                    </button>
                    <a href="/plResource" class="btn btn-outline-secondary btn-action">
                        <i class="fas fa-list me-2"></i>返回列表
                    </a>
                    #if(resource.id != null)
                    <button type="button" class="btn btn-light ms-auto" id="deleteBtn">
                        <i class="fas fa-trash-alt me-2"></i>删除资源
                    </button>
                    #end
                </div>
            </form>
        </div>
    </div>

    <!-- 信息提示 -->
    <div class="alert alert-info mt-4">
        <div class="d-flex align-items-center">
            <i class="fas fa-lightbulb me-3 fs-4 text-info"></i>
            <div>
                <strong>操作提示：</strong>
                您可以上传图片(JPG/PNG)、视频(MP4)或音频(MP3)文件，最大文件大小为100MB。上传后资源将自动归类到相应类型。
            </div>
        </div>
    </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

<script>
    // 文件上传区域点击事件
    document.getElementById('fileUploadArea').addEventListener('click', function() {
        document.getElementById('fileInput').click();
    });

    // 文件选择变化事件
    document.getElementById('fileInput').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            // 显示文件名称
            const fileName = file.name;
            document.querySelector('#fileUploadArea h5').textContent = fileName;
            document.querySelector('#fileUploadArea p').textContent =
                `文件类型: ${file.type} | 大小: ${(file.size / 1024 / 1024).toFixed(2)}MB`;

            // 预览图片文件
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById('filePreview');
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }
                reader.readAsDataURL(file);
            } else {
                document.getElementById('filePreview').style.display = 'none';
            }
        }
    });

    // 表单提交事件
    document.querySelector('form').addEventListener('submit', function(e) {
        #if(resource.id != null )
            return;
        #end

        const fileInput = document.getElementById('fileInput');
        const fileName = document.querySelector('#fileUploadArea h5').textContent;
        // 新资源必须上传文件
        if (!fileInput.files.length && !fileName.includes('当前文件')) {
            e.preventDefault();
            alert('请选择要上传的资源文件');
            return;
        }

        // 文件大小验证
        if (fileInput.files.length > 0) {
            const file = fileInput.files[0];
            const maxSize = 100 * 1024 * 1024; // 100MB

            if (file.size > maxSize) {
                e.preventDefault();
                alert('文件大小不能超过100MB');
                return;
            }

            // 显示进度条
            document.getElementById('progressBar').style.display = 'block';

            // 模拟上传进度
            let progress = 0;
            const progressBar = document.querySelector('.progress-bar');
            const interval = setInterval(() => {
                progress += Math.floor(Math.random() * 10);
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                }
                progressBar.style.width = `${progress}%`;
                progressBar.textContent = `${progress}%`;
            }, 200);
        }
    });

    // 删除按钮事件
    document.getElementById('deleteBtn')?.addEventListener('click', function() {
        if (confirm('确定要删除此资源吗？此操作不可恢复！')) {
            window.location.href = '/plResource/delete?id=#(resource.id)';
        }
    });

    // 拖放功能
    const dropArea = document.getElementById('fileUploadArea');

    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });

    function highlight() {
        dropArea.style.borderColor = '#0d6efd';
        dropArea.style.backgroundColor = '#e9f0ff';
    }

    function unhighlight() {
        dropArea.style.borderColor = '#ced4da';
        dropArea.style.backgroundColor = '#f8f9fa';
    }

    dropArea.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        document.getElementById('fileInput').files = files;

        // 触发change事件
        const event = new Event('change');
        document.getElementById('fileInput').dispatchEvent(event);
    }
</script>
</body>
</html>